<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- link Swiper's CSS -->
     <link rel="stylesheet" href="./swiper.min.css">
</head>
<body>
    <!-- Swiper -->
     <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image: url(../imgs/hot-01.jpg);"></div>
            <div class="swiper-slide" style="background-image: url(../imgs/hot-02.jpg);"></div>
            <div class="swiper-slide" style="background-image: url(../imgs/hot-03.jpg);"></div>
            <div class="swiper-slide" style="background-image: url(../imgs/hot-04.jpg);"></div>
            <div class="swiper-slide" style="background-image: url(../imgs/hot-05.jpg);"></div>
        </div>
        <!-- Add Paination -->
         <div class="swiper-pagination"></div>
     </div>
     <!-- Swiper JS -->
      <script src="./swiper.min.js"></script>
      <script>
        var swiper = new Swiper('.swiper-container',{
            // 分页器
            pagination:'.swiper-pagination',
            // 切换效果
            effect:'cube',
            // 立方体的配置
            cube: {
                // 阴影
                shadow:true,
                slideShadows:true,
                // 阴影的偏移
                shadowOffset:100,
                // 阴影缩放的比例
                shadowScale:0.94
            },
            loop:true,
            autoplay:1500
        });
      </script>
</body>
</html>